/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {DatePicker, Drawer, Form, Input, Popconfirm, Table, Tabs} from 'antd';

import styles from '../index.less';
import FormBase from '../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ViewTitle from "../../components/ViewTitle";
import {FormField, SearchForm} from "antd-extra";
import TabsInboundLots from "./tabs/TabsInboundLots";
import {title} from "mockjs/src/mock/random/text";
import ModalDiscardDetail from "./modal/ModalDiscardDetail";

const {RangePicker} = DatePicker;
moment.locale('zh-cn');

const _ = require('lodash');

@Form.create()
@connect(({
            user,
            global,
            customer,
            sales,
            dict,
            material,
            store
          }) => ({...user, ...global, ...dict, ...material, ...customer, ...sales, ...store}))
export default class Discard extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });

    this.props.dispatch({
      type: 'store/findDiscardRecordMany',
      payload
    });
  }

  columns() {
    const cols = this.getDiscardTableColumns();
    cols.push({
      title: '操作', dataIndex: 'opt', key: 'opt', fixed: 'right', render: (value, record) => {
        const {reviewStatus='待审核'} = record;
        return <span>
  <a style={{marginRight: '6px'}} onClick={() => {
    this.setState({showDetail: true, record});
  }}>详情</a>

                        <Popconfirm
                          title="确认删除"
                          onConfirm={() => {
                            this.props.dispatch({
                              type: 'store/deleteDiscardRecord',
                              payload: {...record}
                            }).then(res => {
                              this.requestReturn(res);
                              this.componentDidMount();

                            });
                          }}
                          okText="是"
                          cancelText="否"
                        >
                <a disabled={reviewStatus==='同意'} style={{marginRight: '6px'}}>删除</a>
              </Popconfirm>
</span>;
      }
    });
    return cols;
  }


  render() {
    const {form, discardRecords = [], divisionDict = []} = this.props;
    const {showDetail, record} = this.state;
    return <Form className={styles.content}>
      <Tabs defaultActiveKey={'1'}>
        <Tabs.TabPane key="1" tab={'报废单'}>
          <ViewTitle
            title={`报废申请列表`}
            level={1}
            // actions={[
            //   <Button type="primary" onClick={() => this.onCreateOrEditRecord(undefined)}>添加</Button>
            // ]}
          ></ViewTitle>
          <SearchForm
            style={{marginLeft: '6px', marginRight: '6px'}}
            onSearch={() => {
              this.state.current = 1;
              this.componentDidMount();
            }}
            onReset={this.handleReset}
            cols={4}
            min={8}
            expandText="展开"
            form={form}
          >
            {[
              <FormField
                label="供应商名称"
                name="vendor"
                key={1}
              >
                <Input allowClear placeholder={`请输入`}/>
              </FormField>,
              <FormField
                label={'采购公司'}
                name={`division`}
                key={`division`}
              >
                <Input allowClear placeholder={`请输入`}/>
                {/*<Select allowClear placeholder={`请输入采购公司`}>{this.getDivision(divisionDict)}</Select>*/}
              </FormField>,
              <FormField
                label={`创建时间`}
                name="createdTs"
                key={3}
                initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
              >
                <RangePicker allowClear={true}
                  // style={{ width: '150%' }}
                />
              </FormField>
            ]}
          </SearchForm>
          <Table
            className={styles.antTable}
            bordered={true}
            columns={this.columns()}
            dataSource={discardRecords}
            scroll={{x: true}}
            pagination={{
              current: this.state.current,
              total: this.state.total,
              showSizeChanger: true,
              onChange: page => {
                this.state.current = page;
                this.componentDidMount();
              },
              onShowSizeChange: (current, pageSize) => {
                this.state.current = 1;
                this.state.pageSize = pageSize;
                this.componentDidMount();
              }
            }}
          ></Table>
        </Tabs.TabPane>
        <Tabs.TabPane key="2" tab={'入库批次'}>
          <TabsInboundLots callback={(res) => {
            this.requestReturn(res);
            this.componentDidMount();
          }}></TabsInboundLots>
        </Tabs.TabPane>
      </Tabs>
      {showDetail && <Drawer
        visible={showDetail}
        title={`详情`}
        placement="left"
        width={'80%'}
        style={{padding: 0}}
        onClose={() => {
          this.setState({showDetail: false});
          this.componentDidMount();
        }}
      >
        <ModalDiscardDetail
          isReview={false}
          record={record}
        > </ModalDiscardDetail>
      </Drawer>}
    </Form>;
  }
}
